﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
         div {
             width:50px;
             height:50px;
             background-color:pink;
             margin:5px;
             position:absolute;
         }
    </style>
    <script type="text/javascript">
		function (div) {
			var intervalId = setInterval(function () {
				var left = div.style.left || div.offsetLeft;
				var top = div.style.top || div.offsetTop;
				left = (left.toString().replace("px", "") - 0);
				top = (top.toString().replace("px", "") - 0);
				var x = left;
				var y = top;
				x = x + 50;
				y = y + 10;
				if (x >= 500) {
					x = 500;
				}
				if (y >= 300) {
					y = 300;
				}
				div.style.left = x + "px";
				div.style.top = y + "px";

				if (x >= 500 && y >= 300) {
					clearInterval(intervalId);
				}
			}, 20);
		}
 
 
 
        onload = function () {
            var div = document.getElementsByTagName("div")
            for (var i = 0; i < div.length; i++) {
                div[0].style.top = "0px";
                if (i > 0) {
                    div[i].style.top = ((div[i - 1].style.top.toString().replace("px", "") - 0) + 54) + "px";
                }               
            }
            div[0].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[0].style.left || div[0].offsetLeft;
                    var top = div[0].style.top || div[0].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[0].style.left = x + "px";
                    div[0].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }

            div[1].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[1].style.left || div[1].offsetLeft;
                    var top = div[1].style.top || div[1].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[1].style.left = x + "px";
                    div[1].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }
            div[2].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[2].style.left || div[2].offsetLeft;
                    var top = div[2].style.top || div[2].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[2].style.left = x + "px";
                    div[2].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }
            div[3].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[3].style.left || div[3].offsetLeft;
                    var top = div[3].style.top || div[3].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[3].style.left = x + "px";
                    div[3].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }

            div[4].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[4].style.left || div[4].offsetLeft;
                    var top = div[4].style.top || div[4].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[4].style.left = x + "px";
                    div[4].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }

            div[5].onmouseover = function () {
                var intervalId = setInterval(function () {
                    var left = div[5].style.left || div[5].offsetLeft;
                    var top = div[5].style.top || div[5].offsetTop;
                    left = (left.toString().replace("px", "") - 0);
                    top = (top.toString().replace("px", "") - 0);
                    var x = left;
                    var y = top;
                    x = x + 50;
                    y = y + 10;
                    if (x >= 500) {
                        x = 500;
                    }
                    if (y >= 300) {
                        y = 300;
                    }
                    div[5].style.left = x + "px";
                    div[5].style.top = y + "px";

                    if (x >= 500 && y >= 300) {
                        clearInterval(intervalId);
                    }
                }, 20);
            }
        }

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
